<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-26 15:53:27
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-30 14:00:22
-->
<template>
  <div>
    <el-form
      inline
      label-position="top"
      class="grantTypeForm"
      :model="form"
      :rules="rules"
      ref="formElRef"
    >
      <el-form-item label="Grant Type" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in GRANT_TYPE_LIST"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="value" v-if="form.type === 'Custom'">
        <el-input placeholder="自定义授予类型" v-model="form.value" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" :icon="Plus" @click="handleAdd">
          添加一个新的
        </el-button>
      </el-form-item>
    </el-form>
    <ul class="grantType" v-if="list.length">
      <li class="title">
        <span class="key">Uri</span>
      </li>
      <li class="url" v-for="(item, index) in list" :key="index">
        <span class="value">{{ item }}</span>
        <el-button
          :icon="Delete"
          type="danger"
          size="small"
          @click="handleDelete(index)"
        />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue'
import { PropType, ref, watch } from 'vue'

import { IElForm, IElFormRule } from '@/types/element-plus'
import GRANT_TYPE_LIST from '@/utils/grantTypes'

const props = defineProps({
  grantType: {
    type: Array as PropType<string[]>,
    required: true,
  },
})
interface EmitsType {
  (e: 'update:grantType', grantType: string[]): void
}
const emit = defineEmits<EmitsType>()

const formElRef = ref<IElForm | null>(null)

const form = ref<{
  type: string
  value: string
}>({
  type: '',
  value: '',
})
const rules = ref<IElFormRule>({
  value: [{ required: true, message: '字段不可为空', trigger: 'blur' }],
})

const list = ref<string[]>(props.grantType)
watch(
  list,
  (newValue) => {
    emit('update:grantType', newValue)
  },
  {
    deep: true,
  },
)
watch(
  () => props.grantType,
  (newValue) => {
    list.value = newValue
  },
  {
    deep: true,
  },
)

const handleAdd = async () => {
  await formElRef.value?.validate((valid) => {
    if (valid) {
      if (list.value.includes(form.value.type)) {
        return
      }
      list.value.push(
        form.value.type === 'Custom' ? form.value.value : form.value.type,
      )
      form.value.value = ''
      form.value.type = ''
    }
  })
}
const handleDelete = (index: number) => {
  list.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss';
.grantTypeForm {
  .el-form-item {
    margin-bottom: 14px;
    width: 100%;
    .el-select {
      width: 100%;
    }
  }
}
.grantType {
  span {
    display: inline-block;
    line-height: 1.5;
    font-size: 16px;
  }
  .title {
    font-weight: 600;
  }
  .url {
    height: 40px;
    display: flex;
    align-items: center;
    &:nth-child(2n) {
      background-color: #e9e9eb;
    }
  }
  .value {
    width: 94%;
    @include mixin.ellipsis(1);
  }
}
</style>
